<template>
  <el-dialog
    v-model="visible"
    width="600px"
    :close-on-click-modal="false"
    :before-close="handleClose"
    append-to-body
    class="unified-dialog batch-dialog-confirm"
  >

    <template #header>
      <DialogHeader
        icon="VideoPause"
        title="确认型批量操作示例"
        description="显示操作列表 + 简单配置表单"
        type="warning"
      />
    </template>
    
    <div class="dialog-body" v-loading="loading">
      <div class="batch-info">
        <el-alert
          title="批量停止操作"
          type="warning"
          :closable="false"
          show-icon
        >
          <template #default>
            <p>将停止以下 {{ items.length }} 个作业：</p>
            <ul class="item-list">
              <li v-for="item in items" :key="item.id || item.name">
                {{ item.name || item.topic_name }}
              </li>
            </ul>
          </template>
        </el-alert>
      </div>
      
      <el-form
        ref="formRef"
        :model="form"
        label-width="100px"
        label-position="left"
        style="margin-top: 20px"
      >
        <el-form-item label="停止间隔">
          <el-input-number
            v-model="form.interval"
            :min="1"
            :max="60"
            controls-position="right"
          />
          <span class="form-tip">秒，避免同时停止造成系统压力</span>
        </el-form-item>
        
        <el-form-item label="环境选择">
          <el-select
            v-model="form.environment"
            placeholder="选择环境（可选）"
            clearable
            filterable
            popper-append-to-body
            popper-class="batch-dialog-select-popper"
            style="width: 100%"
            @visible-change="handleSelectVisibleChange"
          >
            <el-option label="生产环境" value="prod" />
            <el-option label="测试环境" value="test" />
            <el-option label="开发环境" value="dev" />
          </el-select>
          <span class="form-tip">选择环境，留空使用默认环境</span>
        </el-form-item>
        
        <el-form-item label="更新数据库">
          <el-switch
            v-model="form.update_db"
            active-text="是"
            inactive-text="否"
          />
          <span class="form-tip">更新监控状态标志和暂停监控</span>
        </el-form-item>
      </el-form>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="warning" @click="handleSubmit" :loading="loading">
          确定停止
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import DialogHeader from '@/components/DialogHeader.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  items: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const formRef = ref()
const loading = ref(false)

const form = ref({
  interval: 5,
  environment: '',
  update_db: false
})

const handleSelectVisibleChange = (visible) => {
  const poppers = document.querySelectorAll('.batch-dialog-select-popper')
  console.log('[BatchDialogConfirm] select visible ->', visible)
  console.log('[BatchDialogConfirm] current poppers ->', poppers)
  poppers.forEach((popper, index) => {
    const styles = window.getComputedStyle(popper)
    console.log('[BatchDialogConfirm] popper info', index, {
      display: styles.display,
      opacity: styles.opacity,
      visibility: styles.visibility,
      zIndex: styles.zIndex,
      pointerEvents: styles.pointerEvents,
      top: styles.top,
      left: styles.left
    })
  })
}

const handleClose = () => {
  visible.value = false
}

const handleSubmit = async () => {
  loading.value = true
  
  // 模拟批量操作
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  ElMessage.success(`已成功停止 ${props.items.length} 个作业（演示模式）`)
  emit('success')
  handleClose()
  
  loading.value = false
}

// 监听对话框显示，重置表单
watch(visible, (newVal) => {
  if (newVal) {
    form.value = {
      interval: 5,
      environment: '',
      update_db: false
    }
  }
})
</script>

<style scoped>
.batch-info {
  margin-bottom: 20px;
}

.item-list {
  margin: 10px 0 0 0;
  padding-left: 20px;
  max-height: 150px;
  overflow-y: auto;
}

.item-list li {
  margin: 4px 0;
  font-size: 14px;
  color: #606266;
}

.form-tip {
  margin-left: 12px;
  color: #909399;
  font-size: 12px;
}
</style>

